// 管理权限模块中的数据(当前登录用户拥有的路由权限: 静态路由(无需权限，直接访问) & 动态路由(必须拥有权限))
// 导入所有的静态路由 & 动态路由
import { constantRoutes, asyncRouters } from '@/router/index'
const state = {
  // 当用用户的权限
  //  静态路由
  //  动态路由
  routes: constantRoutes
}
const mutations = {
  // 动态设置路由
  //  payload:将来要动态添加的路由
  SET_ROUTES (state, payload) {
    state.routes = [...constantRoutes, ...payload]
  }
}
const actions = {
  // 筛选动态路由
  //  context：当前 vuex 对象
  //  menus：当前登录用户拥有的权限列表
  setRoutes (context, menus) {
    // 得到当前项目中的动态路由
    // 再从动态路由中筛选出来 menus 对应的路由对象
    const newMenus = asyncRouters.filter(item => {
      return menus.some(subitem => {
        return subitem === item.name
      })
      // bool 如果是 true：说明当前 item 路由就是当前用户的权限路由
      // bool 如果是 false：说明当前 item 路由不是当前用户的权限路由
    })
    // 再将路由对象赋值给 routes，得到了完整的路由（静态路由，动态路由）
    context.commit('SET_ROUTES', newMenus)
    // 将动态路由返回给外界，这又是一个伏笔
    return newMenus
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
